<template>
    <section class="jumbotron">
        <h3 class="jumbotron-heading">搜索 Github 用户</h3>
        <div>
            <input type="text" placeholder="输入要搜索的用户名" v-model="keyWord"/>&nbsp;
            <button @click="searchUsers">Search</button>
        </div>
    </section>
</template>

<script>
    //导入axios组件
    import axios from 'axios'
    export default {
        name:'Search',
        data() {
            return {
                keyWord:''
            }
        },
        methods:{
            searchUsers(){
                if (this.keyWord!='') {
                    //get方法携带参数
                    axios.get('https://api.github.com/search/users',{params:{
                        q:this.keyWord
                    }}).then((response)=>{
                        console.log("请求成功");
                        //暴露事件
                        this.$bus.$emit('getUsers',response.data.items);
                    }).catch((error)=>{
                        console.log("请求失败",error.message);
                    });
                }
            }
        }
    }
</script>

<style>

</style>